<template>
  <Modal v-model="showPsdModal" draggable title="修改密码" width="650">
    <Form ref="formModel" :rules="ruleValidate" :model="bloc.form" :label-width="100" label-position="right">
      <FormItem label="原密码:" prop="oldPwd" required v-if="idx === 0">
        <Input type="password" placeholder="请填写旧密码" autocomplete="new-password" v-model="bloc.form.oldPwd" style="width: 400px;height: 40px;"/>
      </FormItem>
      <FormItem label="新密码:" prop="password" required>
        <Input type="password" placeholder="请填写新密码" autocomplete="new-password" v-model="bloc.form.password" style="width: 400px;height: 40px;"/>
      </FormItem>
      <FormItem label="确认密码:" prop="repeatPassword" required>
        <Input type="password" placeholder="请填写确认密码" autocomplete="new-password" v-model="bloc.form.repeatPassword"
               style="width: 400px;height: 40px;"/>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button style="width: 56px;height: 32px;" @click="modalCancel(null)">取消</Button>
      <Button type="primary" style="margin-left: 30px;width: 56px;height: 32px;" :loading="btnload.loading"
              @click="modalOk">确定
      </Button>
    </div>
    <div slot="close">
      <Icon color="#999" size="31" @click="modalCancel(null)" type="ios-close" />
    </div>
  </Modal>
</template>

<script lang="ts">
  import {Component, Vue, Prop} from 'vue-property-decorator';
  import {Loading} from '@/base/Loading';
  import {ChangeAccountPwdBloc} from '@/component/bloc/ChangeAccountPwd';
  import {getValidatePsd} from '@/base/util/Validate';
  import {isEmpty} from '@/base/util/Strings';

  @Component
  export default class FormRoleModal extends Vue {
    @Prop({type: Boolean})
    readonly showPsdModal!: boolean;
    @Prop({type: Number})
    readonly idx!: number;

    bloc: ChangeAccountPwdBloc = new ChangeAccountPwdBloc();
    btnload = new Loading();
    validateRepeatPassword = (rule: any, value: string, callback: any) => {
      isEmpty(this.bloc.form.repeatPassword) ||
      this.bloc.form.password !== this.bloc.form.repeatPassword
        ? callback(new Error('前后密码输入不一致。')) : callback();
    };
    validatePsd = (rule: any, value: string, callback: any) => {
      if (isEmpty(value)) return callback(new Error('密码不能为空'));
      if (!getValidatePsd(value)) return callback(new Error('密码由字母、数字、下划线组成且长度为6-20'));
      return callback();
    };

    ruleValidate = {
      oldPwd: [
        {required: true, message: '原密码不能为空', trigger: 'blur'}
      ],
      password: [
        {required: true, validator: this.validatePsd, trigger: 'blur'}
      ],
      repeatPassword: [
        {validator: this.validateRepeatPassword, trigger: 'change'}
      ]
    };

    save() {
      return this.idx === 0 ? this.bloc.oldSave() : this.bloc.save(this.idx)
    }

    modalOk() {
      const formRef: any = this.$refs['formModel'];
      formRef.validate((valid) => {
        if (valid) {
          this.btnload.loading = true;
          this.save().then(res => {
            this.btnload.loading = false;
            this.$Message.success('修改密码成功');
            this.modalCancel(true);
          }).catch(err => {
            this.btnload.loading = false;
            this.$Message.error(err.message || '修改密码失败');
            console.log('出错啦::::', err);
          });
        }
      });
    }

    modalCancel(val) {
      const formRef: any = this.$refs['formModel'];
      formRef.resetFields();
      val ? this.$emit('savePwdModal') : this.$emit('closeModal');
    }

  }
</script>

<style lang="less" scoped>
</style>
